import React, { useEffect, useState } from 'react';
import '../../styles/zheng/AddTeam.scss'
import { useNavigate } from 'react-router-dom'
import { Form, Button, Input, Select, Col, Avatar, message, Card, Radio, Tag, Switch, Drawer, Descriptions } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { getOfOrg, getTeamTag, getTeamer, addTeam } from '../../api/zheng/index'
interface Props {

}

function AddTeam(props: Props) {
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const { TextArea } = Input;
    const [messageApi, contextHolder] = message.useMessage()
    var [ofOrglist, setOflist] = useState([])
    var [teamTag, setTeamTag] = useState([])
    var [teamer, setTeamer] = useState([])
    const navigate = useNavigate()
    const [open, setOpen] = useState(false);
    // 挂载期
    useEffect(() => {
        getOfOrg().then(res => {
            var arr = res.data.map((item: any) => {
                return { value: item.name, label: item.name }
            })
            setOflist(arr)
        })
        getTeamTag().then(res => {
            var arr = res.data.map((item: any) => {
                return { value: item.name, label: item.name }
            })
            setTeamTag(arr)
        })
        getTeamer().then(res => {
            setTeamer(res.data)
        })
    }, [])
    // 表单间距
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    // 医师详情
    const showDrawer = () => {
        setOpen(true);
    };
    // 关闭抽屉
    const onClose = () => {
        setOpen(false);
    };
    // 提交表单
    const onFinish = async (values: any) => {
        console.log(values);
        addTeam({ ...values, avatar: 'https://cdn7.axureshop.com/demo/1881228/images/%E5%9B%A2%E9%98%9F%E7%AE%A1%E7%90%86/u5410.png', states: true, leader: "李明明", signnum: 500, score: 4.9, isjoin: false }).then(res => {
            if (res.status == 201) {
                messageApi.open({
                    type: 'success',
                    content: '新增成功',
                });
                setTimeout(() => {
                    navigate(-1)
                }, 1000)
            }

        })

    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };


    return (
        <div className='addteam'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>新增团队信息</h3>
            </div>
            <h4>团队信息</h4>
            {/* 团队信息列表 */}
            <Form
                {...layout}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="团队编号"
                        name="id"
                    >
                        <span className='jsonid'>2019090009</span>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队名称"
                        name="teamname"
                        rules={[{ message: '请填写团队名称' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队头像"
                        name="avatar"
                        rules={[{ message: '请选择团队头像' }]}
                    >
                        <div className="avatorbox">
                            <Avatar shape="square" icon={<UserOutlined />} />
                            <a >+点击上传</a>
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="所属机构"
                        name="oforg"
                    >
                        <Select
                            options={ofOrglist}
                            defaultValue='请选择' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队标签"
                        name="tags"
                    >
                        <Select
                            options={teamTag}
                            defaultValue='请选择'

                        />
                    </Form.Item>
                </Col>
                <Col span={8}></Col>

                {/* 团队成员 */}
                <Col span={10}>
                    <Form.Item >
                        <h4>团队成员</h4>
                        {
                            teamer.map((item: any) => {
                                return (
                                    <Card style={{ width: 300 }}
                                        actions={[
                                            <Button size='small' onClick={showDrawer}>医师详情</Button>
                                        ]}>
                                        <div className="avatar">
                                            <Avatar src={item.avatar} shape="square" size={80} />
                                            <span className='ltag'>{item.tag}</span>
                                        </div>
                                        <div className="right">
                                            <div className="title">
                                                <p>{item.name}</p>
                                                <i>{item.role}</i>
                                            </div>
                                            <div className="desc">
                                                <p>签约人数 {item.people}</p>
                                            </div>
                                            <div className="tags">
                                                {
                                                    item.tags.map((sitem: any) => {
                                                        return (
                                                            <Tag color={sitem.name === '高血压' ? 'red' : 'green'} style={{ border: "none", borderRadius: "10px" }}>{sitem.name} </Tag>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </Card>
                                )
                            })
                        }
                    </Form.Item>
                </Col>
                <Col span={14}></Col>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        新增
                    </Button>
                </Form.Item>

            </Form>
            {/* 抽屉-医师详情 */}
            <Drawer placement="right" onClose={onClose} open={open} size="large" closable={false}>
                {
                    teamer.map((item: any) => {
                        return (
                            <>
                                <Descriptions title="医生信息" column={2}>
                                    <Descriptions.Item label="医生编号" span={1}>{item.id}</Descriptions.Item>
                                    <Descriptions.Item label="医生姓名">{item.name}</Descriptions.Item>
                                    <Descriptions.Item label="医生头像"><Avatar src={item.avatar} /> </Descriptions.Item>
                                    <Descriptions.Item label="性别">{item.sex}</Descriptions.Item>
                                </Descriptions>
                                <Descriptions column={1}>
                                    <Descriptions.Item label="角色">{item.role}</Descriptions.Item>
                                    <Descriptions.Item label="医生简介">{item.info}</Descriptions.Item>
                                    <Descriptions.Item label="医生擅长">{item.begood}</Descriptions.Item>

                                    <Descriptions.Item label="加入团队">
                                        {
                                            item.joinin.map((sitem: any) => {
                                                return (
                                                    <>{sitem.teamname} <br /> </>
                                                )
                                            })
                                        }
                                    </Descriptions.Item>

                                    <Descriptions.Item label="签约人数">{item.people}</Descriptions.Item>
                                    <Descriptions.Item label="创建时间">{item.createtime}</Descriptions.Item>
                                    <Descriptions.Item label="创建人">{item.creator}</Descriptions.Item>
                                    <Descriptions.Item label="账号状态"><Switch defaultChecked={item.states} checkedChildren="启用" unCheckedChildren="禁用" /> </Descriptions.Item>
                                </Descriptions>
                            </>
                        )
                    })
                }

            </Drawer>
            {contextHolder}
        </div>
    );
}

export default AddTeam;